@extends('admin.admin')

@section('content')
    @inject('pictureService', 'App\Interfaces\PictureService')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            广告管理
            <small>广告位置列表</small>
            <small>广告列表</small>
            <small>修改</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 控制面板</a></li>
            <li >广告管理</li>
            <li ><a href="/admin/ad_position">广告位置列表</a></li>
            <li ><a href="/admin/ad/{{$old_pos_id}}">广告列表</a></li>
            <li class="active">修改</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">

        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">广告添加</h3>
                        <div class="pull-right">
                            <a href="{{Route('admin.ad.show',$old_pos_id)}}" type="button" class="btn btn-block btn-success btn-xs"><i class="icon  glyphicon glyphicon glyphicon-menu-left"></i> 返回</a>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <!-- form start -->
                    {!! Form::model($ad,['route'=>['admin.ad.update',$ad->id],'method'=>'put','class'=>'form-horizontal'])  !!}
                    {!! Form::hidden('back_url',@$_SERVER['HTTP_REFERER']) !!}
                    {!! Form::hidden('pos_id',$old_pos_id) !!}
                    {!! Form::hidden('list_order',$ad->list_order) !!}
                    <div class="box-body">
                        <div class="form-group @if($errors->has('title')) has-error   @endif">
                            <label class="col-sm-2 control-label"  for="exampleInputEmail1">广告标题</label>
                            <div class="col-sm-3">
                                {!! Form::text('title',old('title'),array('class'=>'form-control','placeholder'=>'广告标题'))!!}
                            </div>
                            <div class="col-sm-3">
                                @if($errors->has('title'))
                                    <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$errors->first('title')}}</label>
                                @endif
                            </div>
                        </div>

                        <div class="form-group @if($errors->has('image')) has-error   @endif">
                            <label class="col-sm-2 control-label" for="exampleInputPassword1">广告图片：</label>

                            <div class="col-sm-2" style="width: 200px;">
                                <div class="image-uploader">
                                    <style>
                                        .upload-btn{
                                            display: block; width:48px;height:30px;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;
                                        }
                                    </style>
                                    <!-- /.box-header -->
                                    <div class="box-body">

                                        <div style="width: 145px;height: 145px; display: block;">
                                            <img class="image" style="width: 145px;; padding: 1px;" width="145" height="145" src="@if (old('image',$ad->image)) {{$pictureService::thumb(old('image',$ad->image))}} @else   http://placehold.it/1920x400 @endif"/>
                                            <input type="hidden" id="image_url" name="image_url" value="{{old('image_url')}}">
                                        </div>
                                        <div class="message" style="width: 145px;height: 145px; display: block;position: absolute; padding: 5px; top:0px; color: red; text-align: center; line-height: 145px;display: none;">

                                        </div>

                                        <div class="progress progress-xxs" style="position: absolute;width: 140px; left:13px; display: none;">
                                            <div class="progress-bar progress-bar-default " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.box-body -->
                                    <div class="box-footer" style="position: relative">

                                        <button class="btn btn-sm btn-default btn-flat pull-left" type="button">上传</button>
                                        {!! Form::file('file',['class'=>'upload-btn','id'=>'fileupload','type'=>'file','data-url'=>'/admin/file_upload']) !!}
                                        {!! Form::hidden('image',old('image'),['id'=>'thumb']) !!}

                                        <button class="btn  btn-sm btn-danger btn-flat pull-right" type="button">删除</button>
                                    </div>
                                </div>
                                <!-- /.box -->
                            </div>

                            @if($errors->has('image'))
                                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$errors->first('image')}}</label>
                            @endif
                        </div>

                        <div class="form-group @if($errors->has('m_image')) has-error   @endif">
                            <label class="col-sm-2 control-label" for="exampleInputPassword1">手机端广告图片：</label>

                            <div class="col-sm-2" style="width: 200px;">
                                <div class="image-uploader">
                                    <style>
                                        .upload-btn{
                                            display: block; width:48px;height:30px;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;
                                        }
                                    </style>
                                    <!-- /.box-header -->
                                    <div class="box-body">

                                        <div style="width: 145px;height: 145px; display: block;">
                                            <img class="image" style="width: 145px;; padding: 1px;" width="145" height="145" src="@if (old('m_image',$ad->m_image)) {{$pictureService::thumb(old('m_image',$ad->m_image))}} @else   http://placehold.it/1920x400 @endif"/>
                                            <input type="hidden" id="image_url" name="image_url" value="{{old('image_url')}}">
                                        </div>
                                        <div class="message" style="width: 145px;height: 145px; display: block;position: absolute; padding: 5px; top:0px; color: red; text-align: center; line-height: 145px;display: none;">

                                        </div>

                                        <div class="progress progress-xxs" style="position: absolute;width: 140px; left:13px; display: none;">
                                            <div class="progress-bar progress-bar-default " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.box-body -->
                                    <div class="box-footer" style="position: relative">

                                        <button class="btn btn-sm btn-default btn-flat pull-left" type="button">上传</button>
                                        {!! Form::file('file',['class'=>'upload-btn','id'=>'fileupload','type'=>'file','data-url'=>'/admin/file_upload']) !!}
                                        {!! Form::hidden('m_image',old('m_image'),['id'=>'thumb']) !!}

                                        <button class="btn  btn-sm btn-danger btn-flat pull-right" type="button">删除</button>
                                    </div>
                                </div>
                                <!-- /.box -->
                            </div>

                            @if($errors->has('m_image'))
                                <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$errors->first('m_image')}}</label>
                            @endif
                        </div>

                        <div class="form-group @if($errors->has('url')) has-error   @endif">
                            <label class="col-sm-2 control-label" for="exampleInputEmail1">广告链接</label>
                            <div class="col-sm-3">
                                {!! Form::text('url',old('url'),array('class'=>'form-control','placeholder'=>'广告链接'))!!}
                            </div>
                            <div class="col-sm-3">
                                @if($errors->has('url'))
                                    <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$errors->first('url')}}</label>
                                @endif
                            </div>
                        </div>

                        <div class="form-group @if($errors->has('m_url')) has-error   @endif">
                            <label class="col-sm-2 control-label" for="exampleInputEmail1">手机端广告链接</label>
                            <div class="col-sm-3">
                                {!! Form::select('m_url',$activity_id_arr, @$activity_id, ['class'=>'form-control select2', 'id'=>'m_url' ])!!}
                            </div>
                            <div class="col-sm-3">
                                @if($errors->has('m_url'))
                                    <label class="control-label" for="inputError"><i class="fa fa-times-circle-o"></i> {{$errors->first('m_url')}}</label>
                                @endif
                            </div>
                        </div>

                        <!-- /.box-body -->

                    </div>
                    <div class="box-footer">
                        <div class="form-group no-padding">
                            <label class="col-sm-2 control-label">&nbsp;</label>
                            <div class="col-sm-3">
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                    {!! Form::close()  !!}
                    <!-- /.box -->
                </div>
            </div>
        </div>



    </section>


    <script src="{{ asset ("/components/blueimp-file-upload/js/vendor/jquery.ui.widget.js") }}"></script>
    <script src="{{ asset ("/components/blueimp-file-upload/js/jquery.iframe-transport.js") }}"></script>
    <script src="{{ asset ("/components/blueimp-file-upload/js/jquery.fileupload.js") }}"></script>
    <script>
        $(function () {
            $('.image-uploader').each(function(k,imageUploader){
                var wrapper = $(imageUploader);//盒子
                var uploadBtn = wrapper.find('#fileupload');
                var imageFile = wrapper.find('.image');
                var progress = wrapper.find('.progress');
                var progressBar = progress.find('.progress-bar');
                var inputFile = wrapper.find('#thumb');
                var imageUrl = wrapper.find('#image_url');
                var message = wrapper.find('.message');

                uploadBtn.click(function(){
                    progressBar.css('width', 0 + '%');
                    imageFile.attr('src','http://placehold.it/1920x400');
                    inputFile.val('');
                    message.hide();

                });
                wrapper.find('.btn-danger').click(function(){
                    progressBar.css('width', 0 + '%');
                    imageFile.attr('src','http://placehold.it/1920x400');
                    inputFile.val('');
                    message.hide();

                });

                uploadBtn.fileupload({
                    dataType: 'json',
                    headers:{'X-CSRF-TOKEN':'{{csrf_token()}}'},
                    add: function (e, data) {
                        data.submit();
                    },
                    progressall: function (e, data) {
                        progress.fadeIn();
                        var percent = parseInt(data.loaded / data.total * 100, 10);
                        if (progress==1){
                            progress.show()
                        }
                        progressBar.css('width', percent + '%');
                        setTimeout(function () {
                            progress.fadeOut();
                        }, 500);
                    },
                    done: function (e, data) {
                        imageFile.attr('src',data.result.url);
                        inputFile.val(data.result.id);
                        imageUrl.val(data.result.url);
                    },
                    complete:function(){
                    }
                });
            });
        });
    </script>
    <!-- /.content -->
@endsection